<template>
  <div class="choose-main-con">
    <aside class="index-aside-nav">
      <!-- 导航栏内容 -->
      <div class="index-aside-nav-menu">
        <!-- 菜单 -->
        <el-collapse v-model="activeName" accordion @change="changeFun($event)">
          <el-collapse-item v-for="(v,i) in parentItem" :key="v.id" :name="i">
            <template slot="title">
              {{v.nameCn}}
            </template>
          </el-collapse-item>
        </el-collapse>
      </div>
    </aside>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        mainName: '',
        itemStyle: false,
        list: {},
        parentItem: [
          {
            nameCn: 'index',
            id: '1'
          },
          {
            nameCn: '用例维护',
            id: '2'
          },
          {
            nameCn: 'pre-data',
            id: '3'
          },
          {
            nameCn: '期望结果',
            id: '4'
          },
          {
            nameCn: 'case分类',
            id: '5'
          },
          {
            nameCn: '测试计划',
            id: '6'
          },
          {
            nameCn: '测试报告',
            id: '7'
          },
          {
            nameCn: '操作员管理',
            id: '8'
          }
        ],
        activeName: [0]
      };
    },
    methods: {
      changeFun: function (i) {
        if (i === 0) {
          this.$router.push({path: '/home/'});
        } else if (i === 1) {
          this.$router.push({path: '/maintenance'});
        } else if (i === 2) {
          this.$router.push({path: '/preData'});
        } else if (i === 3) {
          this.$router.push({path: '/desiredResult'});
        } else if (i === 4) {
          this.$router.push({path: '/caseClass'});
        } else if (i === 5) {
          this.$router.push({path: '/testPlan'});
        } else if (i === 6) {
          this.$router.push({path: '/testReport'});
        } else if (i === 7) {
          this.$router.push({path: '/operator'});
        }
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../static/css/querySearch.styl"
  .choose-main-con
    display: flex;
    flex: 1;

  .index-aside-nav
    flex: 1;
    min-width: 275px;
    background: #0D1A23;
    .index-aside-nav-menu
      font-size: 16px;
      display: flex;
      flex-direction: column;
      .el-collapse
        border: 0;
        .el-collapse-item__header
          border-left: 4px solid transparent;
          background: #294050;
          height: 60px;
          line-height: 60px;
          font-size: 16px;
          color: #b4bfc7;
          border-bottom: none;
          transition: 0.2s ease-in;
        .is-active > .el-collapse-item__header
          border-left: 4px solid #2AA1F3;
          color: #ECF7FF;
        .el-collapse-item__header:hover
          color: rgba(255, 255, 255, 0.6);
          background: #1d303e;
          transition: 0.2s ease-out;
        .el-collapse-item__wrap
          border-bottom: 0;
          .el-collapse-item__content
            background: #0D1A23;
            padding: 0;
            .child-item
              height: 56px;
              background: rgba(41, 64, 80, 0);
              color: #ECF7FF;
              line-height: 56px;
              cursor: pointer;
              transition: 0.2s ease-in;
              .child-item-first
                padding-left: 50px;
              .child-item-first a
                display: inline-block;
                width: 100%;
                height: 100%;
                color: #ccc;
              .child-item-active
                color: #009CFF;
                background-color: rgba(41, 64, 80, 0.5);
                & a
                  color: #fff;
            .child-item:hover
              background-color: rgba(41, 64, 80, 0.3);
              transition: 0.2s ease-out;
</style>
